<template>
	<MyPage title="添加报价单" :isback="true">
		<view slot="gBody">
			<u-form :model="form" ref="uForm">
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="名称" prop="name" required>
						<u-input v-model="form.name" placeholder="请输入报价单名称" maxlength="20" :trim="true" />
					</u-form-item>
					<u-form-item borderBottom labelWidth="150" label="所属分类" prop="type" required>
						<u-input v-model="form.type" disabled style="display:none" />
						<u-input v-model="typeLabels" placeholder="请选择分类" disabled @click="typeShow=true" />
						<u-select v-model="typeShow" mode="mutil-column-auto" :list="typeData" @confirm="typeConfirm"></u-select>
					</u-form-item>
					<u-form-item borderBottom labelWidth="150" label="分组" prop="group" required>
						<u-input v-model="form.group" placeholder="请输入分组名称" maxlength="20" :trim="true" />
						<u-button size="mini" type="error" plain class="right-btn" solt="right" @click="groupAdd">+</u-button>
					</u-form-item>
					<view v-if="groupList.length">
						<u-form-item borderBottom labelWidth="150" label=" " v-for="(item,index) in groupList" :key="index">
							<u-input v-model="groupList[index]" placeholder="请输入分组名称" maxlength="20" :trim="true" />
							<u-button size="mini" plain class="right-btn" solt="right" @click="groupReduce(index)">-</u-button>
						</u-form-item>
					</view>
				</view>
				<view class="btn-view">
					<div class="btn-view-flex">
						<u-button type="error" shape="circle" plain class="btn-list" @click="backType='list',formSubmit()">保存</u-button>
						<u-button type="error" shape="circle" class="btn-list" @click="backType='goods',formSubmit()">保存并添加商品</u-button>
					</div>
				</view>
			</u-form>
		</view>
	</MyPage>
</template>		

<script>
import mixin from "@/libs/mixin.js";
import { savediy } from '@/api/my.js'
export default {
	mixins: [mixin],
	data() {
		return {
			typeShow:false,
			typeLabels:'',
			typeData: [{
				value: 1,
				label: '通讯设备',
				children: [
					{
						value: 2,
						label: '手机'
					},
					{
						value: 3,
						label: '传呼机'
					},
					{
						value: 4,
						label: '电话'
					}
				]
			}],
			groupList:[],
			form:{
				name:'',
				type:'',
				group:'',
				//token:this.$store.state.app.token
			},
			rules: { 
				name: [
					{
						required: true,
						message: '请填写您的报价单名称',
						trigger: ['change','blur']
					}
				],
				type: [
					{
						required: true,
						message: '请选择所属分类',
						trigger: ['change','blur']
					}
				],
				group: [
					{
						required: true,
						message: '请输入分组名称',
						trigger: ['change','blur']
					}
				]
			},
			backType: 'list'
		}
	},
	onLoad() {
		//this.getData();
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		//获取分类数据
		// getData(){ 
		// 	uni.request({
		// 		url: 'http://www.txzh.com.cn/api.php?app=Default&act=getDiy',  
		// 		method: 'POST',
		// 		header: {  
		// 				'Content-Type': 'application/x-www-form-urlencoded',
		// 				'X-Requested-With': 'xmlhttprequest'
		// 		},
		// 		data:{ 
		// 			token:this.$store.state.app.token
		// 		}, 
		// 		success: res => {
		// 			console.log(res) 
		// 			this.userType = res.data.list.userType;
		// 		},  
		// 		fail: () => {},  
		// 		complete: () => {}  
		// 	});   
		// },
		//选择分类
		typeConfirm(e) {
			let labelArr = [],
				valueArr = [];
			e.forEach(item=>{
				labelArr.push(item.label);
				valueArr.push(item.value);
			});
			this.typeLabels = labelArr.join('-');
			this.form.type = valueArr.join(',');
		},
		//分组处理
		groupAdd() {
			this.$set(this.groupList,this.groupList.length,'');
		},
		groupReduce(index) {
			this.$delete(this.groupList,index);
		},
		// 提交登录
		formSubmit(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let formObj = {...this.form};
					if( this.groupList.length ){
						let arr = this.groupList.filter(item=>{
							return Boolean(item)
						});
						formObj.group = this.form.group+','+arr.join(",");
					};
					console.log(formObj);
					if( this.backType=='list' ){
						this.$utils.switchTab('/diy/diy-list');
					}else{
						this.$utils.navigateTo('/diy/goods-add/goods-add');
					}
					// savediy(this.form).then(res=>{
					// 	if(res.list.err == 0){
					// 		this.$utils.switchTab('/my/my');
					// 	}else{
					// 		uni.showToast({
					// 			title: res.list.msg,
					// 			icon:'none'
					// 		})
					// 	}
					// }).catch(err=>{
					// 	uni.showToast({
					// 		title: res.msg,
					// 		icon:'none'
					// 	})
					// });
				}
			});
		}
	}
}
</script>

<style lang="scss">
page{
	background:#f3f3f3;
}
</style>
<style lang="scss" scoped>
.view-box{
	position: relative;
	margin-top:15rpx;
	background: #fff;
	padding: 10rpx 40rpx;
	border-radius: 20rpx;
}
.u-size-mini{
	width:50rpx;
}
.btn-view{
	height:180rpx;
	.btn-view-flex{
		position:fixed;
		left:4%;
		bottom:30rpx;
		z-index:10;
		width:92%;
		display: flex;
		justify-content: space-between;
		margin: 25px auto;
		.btn-list{
			width:47%;
		}
	}
}
</style>